<template>
	<view class="work-container">
		<view class="swiperBox">
			<!-- 轮播图 -->
			<uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
				<swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
					<swiper-item v-for="(item, index) in data" :key="index">
						<view class="swiper-item" @click="clickBannerItem(item)">
							<image :src="item.image" mode="aspectFill" :draggable="false" />
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		
		<view class="gridBox">
			<!-- 宫格组件 -->
			<uni-section title="审批中心" type="line"></uni-section>
			<view class="grid-body">
				<uni-grid :column="4" :showBorder="false" @change="spzxChange">
					<uni-grid-item :index="1">
						<view class="grid-item-box">
							<image src="@/static/images/icon/cswd.png" mode=""></image>
							<text class="text">我的审批</text>
						</view>
					</uni-grid-item>
					<uni-grid-item :index="2">
						<view class="grid-item-box">
							<uni-badge class="uni-badge-left-margin" :text="dbNumber" absolute="rightTop">
								<image src="@/static/images/icon/db.png" mode=""></image>
							</uni-badge>
							<text class="text">待办任务</text>
						</view>
					</uni-grid-item>
					<uni-grid-item :index="3">
						<view class="grid-item-box">
							<image src="@/static/images/icon/yb.png" mode=""></image>
							<text class="text">已办任务</text>
						</view>
					</uni-grid-item>
					<uni-grid-item :index="4">
						<view class="grid-item-box">
							<image src="@/static/images/icon/wdsp.png" mode=""></image>
							<text class="text">抄送我的</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
		
		<view class="gridBox">
			<uni-section title="发起申请" type="line"></uni-section>
			<view class="grid-body">
				<uni-grid :column="4" :showBorder="false" @change="initiateApplication">
					<block v-for="(item,index) in processList">
						<uni-grid-item :index="item" :key="item.key">
							<view class="grid-item-box">
								<image :src="item.icon" mode=""></image>
								<text class="text">{{item.name}}</text>
							</view>
						</uni-grid-item>
					</block>
				</uni-grid>
			</view>
		</view>
	
		<view class="gridBox">
			<uni-section title="申请列表" type="line"></uni-section>
			<view class="grid-body">
				<uni-grid :column="4" :showBorder="false" @change="changeGrid">
					<uni-grid-item :index="0">
					  <view class="grid-item-box">
						<image src="@/static/images/icon/qj.png" mode=""></image>
						<text class="text">请假申请列表</text>
					  </view>
					</uni-grid-item>
					<uni-grid-item :index="1">
					  <view class="grid-item-box">
						<image src="@/static/images/icon/xj.png" mode=""></image>
						<text class="text">消假申请列表</text>
					  </view>
					</uni-grid-item>
					<uni-grid-item :index="2">
					  <view class="grid-item-box">
						<image src="@/static/images/icon/jb.png" mode=""></image>
						<text class="text">加班申请列表</text>
					  </view>
					</uni-grid-item>
					<uni-grid-item :index="3">
					  <view class="grid-item-box">
						<image src="@/static/images/icon/wjcy.png" mode=""></image>
						<text class="text">文件传阅列表</text>
					  </view>
					</uni-grid-item>
					<uni-grid-item :index="4">
					  <view class="grid-item-box">
						<image src="@/static/images/icon/yc.png" mode=""></image>
						<text class="text">用车申请列表</text>
					  </view>
					</uni-grid-item>
					<uni-grid-item :index="5">
					  <view class="grid-item-box">
						<image src="@/static/images/icon/wz.png" mode=""></image>
						<text class="text">物资申请列表</text>
					  </view>
					</uni-grid-item>
					<uni-grid-item :index="6">
					  <view class="grid-item-box">
						<image src="@/static/images/icon/gsl.png" mode=""></image>
						<text class="text">公示栏申请列表</text>
					  </view>
					</uni-grid-item>
					<uni-grid-item :index="7">
					  <view class="grid-item-box">
						<image src="@/static/images/icon/gsl.png" mode=""></image>
						<text class="text">发文申请列表</text>
					  </view>
					</uni-grid-item>
					<uni-grid-item :index="8">
					  <view class="grid-item-box">
						<image src="@/static/images/icon/gsl.png" mode=""></image>
						<text class="text">发文号申请列表</text>
					  </view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
		
		<view class="gridBox">
			<uni-section title="加油列表" type="line"></uni-section>
			<view class="grid-body">
				<uni-grid :column="4" :showBorder="false" @change="changeJyxxGrid">
					<uni-grid-item :index="0">
					  <view class="grid-item-box">
						<image src="@/static/images/icon/jyxx.png" mode=""></image>
						<text class="text">加油录入</text>
					  </view>
					</uni-grid-item>
					<uni-grid-item :index="1">
					  <view class="grid-item-box">
						<image src="@/static/images/icon/jyxx.png" mode=""></image>
						<text class="text">加油记录</text>
					  </view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
  </view>
</template>

<script>
	import {getProcessDefinitionList} from '@/api/bpm/processInstance/index.js'
	import {getTaskTodoPage} from '@/api/bpm/processInstance/index.js'
  export default {
    data() {
      return {
        current: 0,
        swiperDotIndex: 0,
        data: [
			{
			  image: '/static/images/banner/banner3.png'
			},
        ],
		processList:[],
		// 待办数量
		dbNumber:0,
      }
    },
    methods: {
		clickBannerItem(item) {
			console.info(item)
		},
		changeSwiper(e) {
			this.current = e.detail.current
		},
		// 获取可发起的申请列表
		async getApplyForList(){
			let info = await getProcessDefinitionList({
				suspensionState:1
			});
			console.log(info);
			this.processList = info.data;
			// let arr = info.data.filter(item=>{
			// 	return item.key != 'oa_send_documents'
			// })
			// this.processList = arr;
		},
		changeGrid(e) {
			let index = e.detail.index;
			if(index == 0){
				uni.navigateTo({
					url:'/pages/process/leave/index'
				})
			}else if(index == 1){
				uni.navigateTo({
					url:'/pages/process/leaveclear/index'
				})
			}else if(index == 2){
				uni.navigateTo({
					url:'/pages/process/overtime/index'
				})
			}else if(index == 3){
				uni.navigateTo({
					url:'/pages/process/doccirculate/index'
				})
			}else if(index == 4){
				uni.navigateTo({
					url:'/pages/process/useCar/index'
				})
			}else if(index == 5){
				uni.navigateTo({
					url:'/pages/process/inventory/index'
				})
			}else if(index == 6){
				uni.navigateTo({
					url:'/pages/process/column/index'
				})
			}else if(index == 7){
				uni.navigateTo({
					url:'/pages/process/sendDocuments/index'
				})
			}else if(index == 8){
				uni.navigateTo({
					url:'/pages/process/applicationNumber/index'
				})
			}else if(index == 9){
				// 点击的加油
				// uni.navigateTo({
				// 	url:'/pages/process/applicationNumber/index'
				// })
			}else{
				this.$modal.showToast('模块建设中~')
			}
		},
		// 审批中心点击
		spzxChange(e){
			console.log(e)
			let index = e.detail.index;
			if(index == 1){
				// 我的审批
				uni.navigateTo({
					url:'/pages/work/approvalCenter/taskMy'
				})
			}else if(index == 2){
				// 待办审批
				uni.navigateTo({
					url:'/pages/work/approvalCenter/taskTodo'
				})
			}else if(index == 3){
				// 已办审批
				uni.navigateTo({
					url:'/pages/work/approvalCenter/taskDone'
				})
			}else if(index == 4){
				// 抄送我的
				uni.navigateTo({
					url:'/pages/work/approvalCenter/taskCopy'
				})
			}else{
				this.$modal.showToast('模块建设中~')
			}
		},
		// 发起申请
		initiateApplication(e){
			let index = e.detail.index.key;
			if(index == 'oa_leave'){
				// 请假申请
				uni.navigateTo({
					url:'/pages/process/leave/create'
				})
			}else if(index == 'oa_leave_clear'){
				// 销假申请
				uni.navigateTo({
					url:'/pages/process/leaveclear/create'
				})
			}else if(index == 'oa_overtime'){
				// 加班申请
				uni.navigateTo({
					url:'/pages/process/overtime/create'
				})
			}else if(index == 'oa_document_circulation'){
				// 文件传阅
				uni.navigateTo({
					url:'/pages/process/doccirculate/create'
				})
			}else if(index == 'oa_vehicleApply'){
				// 用车申请
				uni.navigateTo({
					url:'/pages/process/useCar/create'
				})
			}else if(index == 'oa_inventory'){
				// 物资申请
				uni.navigateTo({
					url:'/pages/process/inventory/create'
				})
			}else if(index == 'oa_publicity_column'){
				// 公示栏申请
				uni.navigateTo({
					url:'/pages/process/column/create'
				})
			}else if(index == 'apply_with_seal'){
				console.log(e)
				let id = e.detail.index.id;
				let simpleModel = JSON.parse(e.detail.index.simpleModel);
				let simpleModelId = simpleModel.id;
				// 用章申请
				uni.navigateTo({
					url:`/pages/process/useSeal/create?id=${id}&simpleModelId=${simpleModelId}`
				})
			}else if(index == 'oa_send_documents'){
				// 发文申请
				uni.navigateTo({
					url:`/pages/process/sendDocuments/create`
				})
			}else if(index == 'oa_application_number'){
				// 发文号申请
				uni.navigateTo({
					url:`/pages/process/applicationNumber/create`
				})
			}
		},
		// 加油信息
		changeJyxxGrid(e){
			let index = e.detail.index;
			if(index == 0){
				// 录入
				uni.navigateTo({
					url:'/pages/oilUse/create'
				})
			}else if(index == 1){
				// 加油列表
				uni.navigateTo({
					url:'/pages/oilUse/list'
				})
			}
		}
    },
	onLoad() {
		this.getApplyForList();
	},
	async onShow() {
		// 获取待办数量
		let listInfo = await getTaskTodoPage({
			pageNo:1,
			pageSize: 10,
		});
		this.dbNumber = listInfo.data.total;
	}
  }
</script>

<style lang="scss">
	.work-container{
		background-color: #F3F3F3;
		padding: 20rpx;
		box-sizing: border-box;
		.swiperBox{
			width: 100%;
			border-radius: 20rpx;
			overflow: hidden;
			.swiper-box{
				border-radius: 20rpx;
			}
		}
		.gridBox{
			width: 100%;
			height: auto;
			border-radius: 20rpx;
			background-color: #fff;
			overflow: hidden;
			margin-top: 20rpx;
			image{
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
  /* #ifndef APP-NVUE */
  page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #fff;
    min-height: 100%;
    height: auto;
  }

  view {
    font-size: 14px;
    line-height: inherit;
  }

  /* #endif */

  .text {
    text-align: center;
    font-size: 26rpx;
    margin-top: 10rpx;
  }

  .grid-item-box {
    flex: 1;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
  }

  .uni-margin-wrap {
    width: 690rpx;
    width: 100%;
    ;
  }

  .swiper {
    height: 300rpx;
  }

  .swiper-box {
    height: 150px;
  }

  .swiper-item {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    height: 300rpx;
    line-height: 300rpx;
  }

  @media screen and (min-width: 500px) {
    .uni-swiper-dot-box {
      width: 400px;
      /* #ifndef APP-NVUE */
      margin: 0 auto;
      /* #endif */
      margin-top: 8px;
    }

    .image {
      width: 100%;
    }
  }
</style>
